var pcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
var pcStore;
var pcGrid;
var pcWindow;

var selectPantone = function(selectCallback){
    if (!pcWindow) {
        pcWindow = new Ext.Window({
            title: message.get('message.combo.pleaseselect'),
            layout: 'fit',
            width: 800,
            height: 605,
            closeAction: 'hide',
            plain: true,
            modal: true,
            items: [{
                id: 'pantonePanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: '<div id="pantoneDiv"></div>'
            }]
        });
    }
    pcWindow.show();
    
    if (pcGrid) 
        return;
    pcStore = new Ext.data.Store({
        url: '../../servlet/BiPantoneColorServlet?action=4',
        
        reader: new Ext.data.XmlReader({
            record: 'item',
            id: 'id',
            totalRecords: 'itemTotal'
        }, ['index', 'number', 'realColor', 'id']),
        remoteSort: true
    });
    
    pcStore.setDefaultSort('id', 'desc');
    
    var filters = new Ext.grid.GridFilters({
        filters: [{
            type: 'string',
            dataIndex: 'number'
        }, {
            type: 'string',
            dataIndex: 'realColor'
        }]
    });
    
    function renderSelectItem(value, p, record){
        //var selectReferenceCallback = function(id,reference, needle,ctMachineType, weight,front,back,
        //sleeves,bottomThrum,sleevesThrum,necklineThrum,frontPhotoName,backPhotoName,otherPhotoName){
        return String.format('<a href="javascript: selectPantoneCallback(\'{0}\',\'{1}\');pcWindow.hide();"><img src="../../images/icons/arrow_rotate_clockwise.png" title="' + message.get('message.list.select') + '" /></a>', record.data.number, record.data.realColor);
    }
    // create the grid
    pcGrid = new Ext.grid.GridPanel({
        title: pcMessage.get('ui.pantonecolor.listtitle'),
        store: pcStore,
        stripeRows: true,
        plugins: filters,
        height: 560,
        columns: [{
            header: message.get('message.list.id'),
            width: 20,
            dataIndex: 'index',
            sortable: false
        }, {
            header: pcMessage.get('ui.pantonecolor.number'),
            width: 80,
            dataIndex: 'number',
            sortable: true
        }, {
            header: pcMessage.get('ui.pantonecolor.realcolor'),
            dataIndex: 'realColor',
            sortable: true
        }, {
            header: pcMessage.get('ui.pantonecolor.sample'),
            width: 40,
            sortable: false,
            renderer: renderSample
        }, {
            header: message.get('message.list.select'),
            width: 30,
            dataIndex: 'id',
            sortable: false,
            renderer: renderSelectItem
        }],
        viewConfig: {
            forceFit: true
        },
        loadMask: true,
        renderTo: 'pantoneDiv',
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: pcStore,
            displayInfo: true
        })
    });
    
	function renderSample(value, p, record){
        return String.format('<table width="20" style="background-color: #{0};"><tr><td>&nbsp;</td></tr></table>', record.data.realColor);
    }
				
    var startPage = getPrarmeterValue(window.location, 'startPage');
    var start;
    if (startPage == null || startPage == '') {
        start = 0;
    }
    else {
        start = (startPage - 1) * 20;
    }
    pcStore.load({
        params: {
            start: start,
            limit: 20
        }
    });
}

